<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Path Editing</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var values = {
            paths: 100,
            minPoints: 5,
            maxPoints: 15,
            minRadius: 30,
            maxRadius: 90
        };

        var hitOptions = {
            segments: true,
            stroke: true,
            fill: true,
            tolerance: 5
        };

        var radiusDelta = values.maxRadius - values.minRadius;
        var pointsDelta = values.maxPoints - values.minPoints;
        for (var i = 0; i < values.paths; i++) {
            var radius = values.minRadius + Math.random() * radiusDelta;
            var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
            var path = createBlob(view.size * Point.random(), radius, points);
            var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
            var hue = Math.random() * 360;
            path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
            path.strokeColor = 'black';
        };

        function createBlob(center, maxRadius, points) {
            var path = new Path();
            path.closed = true;
            for (var i = 0; i < points; i++) {
                var delta = new Point({
                    length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
                    angle: (360 / points) * i
                });
                path.add(center + delta);
            }
            path.smooth();
            return path;
        }

        var segment, path;
        function onMouseDown(event) {
            segment = path = null;
            var hitResult = project.hitTest(event.point, hitOptions);

            if (event.modifiers.shift) {
                if (hitResult.type == 'segment') {
                    hitResult.segment.remove();
                };
                return;
            }

            if (hitResult) {
                path = hitResult.item;
                if (hitResult.type == 'segment') {
                    segment = hitResult.segment;
                } else if (hitResult.type == 'stroke') {
                    var location = hitResult.location;
                    segment = path.insert(location.index + 1, event.point);
                    path.smooth();
                }
                hitResult.item.bringToFront();
            }
        }

        function onMouseMove(event) {
            var hitResult = project.hitTest(event.point, hitOptions);
            project.activeLayer.selected = false;
            if (hitResult && hitResult.item)
                hitResult.item.selected = true;
        }

        function onMouseDrag(event) {
            if (segment) {
                segment.point += event.delta;
                path.smooth();
            } else if (path) {
                path.position += event.delta;
            }
        }
    </script>
</head>
<body style="background:black">
    <canvas id="canvas" resize></canvas>
</body>
</html>
